<template>

  <div class="main">
    <header-nav-bar></header-nav-bar>

    <div style="position: absolute;top:100px;width: 100%">
      <van-row>
        <van-col span="8" style="text-align: center">当前排队：</van-col>
        <van-col span="16">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                @load="onLoadLineUpList"
            >
              <van-cell v-for="item in list" :key="item" :title="item"/>
            </van-list>
          </van-pull-refresh>

        </van-col>
      </van-row>

      <van-divider/>

      <van-row>
        <van-col style="margin: 10px 20px;">
          当前排队 1 栋 , 还有xx 人未做。
        </van-col>
        <van-col style="margin: 10px 20px;">
          请2栋做好准备预计还有xx分钟，请带上口罩提前下楼准备！
        </van-col>
      </van-row>

      <van-divider></van-divider>

      <div class="buildList">

        <div style="margin: 20px;" v-for="item in floorList">
          <span style="font-size: 20px;">{{ item.unit }}</span>
          <van-slider v-model="item.nums" active-color="#ee0a24" :readonly="true" style="margin-top: 10px;">
            <template #button>
              <div class="custom-button">{{ item.nums }}</div>
            </template>
          </van-slider>
        </div>

      </div>


      <van-divider></van-divider>

      <van-row style="margin-bottom: 100px;margin-left: 20px;">
        <p>当前完成总量</p>
        <van-circle
            style="margin-left: 20px;"
            v-model:current-rate="currentRate"
            :rate="rate"
            :color="gradientColor"
            :text="rate+'%'"
        />
      </van-row>

    </div>


    <bottom-tabbar :index="1"></bottom-tabbar>
  </div>


</template>

<script setup lang="ts">
const headerNavBar = defineAsyncComponent(() =>
    import('@/components/HeaderNavBar.vue')
)
const bottomTabbar = defineAsyncComponent(() =>
    import('@/components/bottomTabbar.vue')
)
import {defineAsyncComponent, onBeforeUnmount, onMounted, ref} from "vue";
import {lineUpList, currentCompleteTotal, floorCompletionList, calculationSpeed} from '@/service/progress.js';

const list: string = ref([]);
const floorList = ref([])
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const currentRate = ref();
const rate = ref(0);
const gradientColor = {
  '0%': '#3fecff',
  '100%': '#6149f6',
};


const timeInter = ref(null)

onMounted(() => {

  loadCurrentCompleteTotal()
  loadFloorCompletionList()

  if (timeInter.value == null) {
    timeInter.value = setInterval(() => {
      loadCurrentCompleteTotal()
      loadFloorCompletionList()
    }, 60000)
  }


})

//页面销毁时触发
onBeforeUnmount(() => {
  clearInterval(timeInter.value);
})

const loadCurrentCompleteTotal = async () => {
  let res = await currentCompleteTotal()
  if (res.data.code === 200) {
    rate.value = res.data.data
  }
}


const loadFloorCompletionList = async () => {
  let res = await floorCompletionList()
  if (res.data.code === 200) {
    floorList.value = res.data.data
  }
}

const onLoadLineUpList = async () => {
  if (refreshing.value) {
    list.value = [];
    refreshing.value = false;
  }

  let res = await lineUpList()
  if (res.data.code === 200) {
    res.data.data.forEach(function (val: any, index: number, array: object) {
      let str = (index + 1) + "、" + val.showText;
      list.value.push(str)
    })
  }
  loading.value = false;
  finished.value = true;
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoadLineUpList();
};

</script>

<style>
.van-slider__button {
  display: none !important;
}

.van-pull-refresh {
  overflow: auto;
  height: 200px;
}


.custom-button {
  width: 26px;
  color: #fff;
  font-size: 8px;
  line-height: 18px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 100px;
}

.buildList {
  height: 200px;
  overflow: auto;
}
</style>